<template>
  <div v-loading="isLoading" style="padding: 24px 12px">
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <el-text size="large"><b>DataLoader</b></el-text>
      <div style="display: flex; align-items: center">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          size="small"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          :clearable="false"
          style="max-width: 240px; margin-right: 24px"
        />
        <el-button type="primary" size="small" @click="handleLoad"
          >handleLoad</el-button
        >
        <el-button type="info" size="small" @click="response = null"
          >clearResponse</el-button
        >
      </div>
    </div>
    <div style="width: 100%; padding-top: 12px">
      <el-input
        :value="responseString"
        size="small"
        type="textarea"
        :autosize="{ minRows: 10, maxRows: 30 }"
        resize="none"
        readonly
        style="font-family: 'Consolas', monospace"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import dayjs from "dayjs";
import axios from "axios";
import { ElNotification } from "element-plus";

const dateRange = ref([new Date(), new Date()]);
const responseData = ref(null);
const responseString = computed(() =>
  JSON.stringify(responseData.value, null, 2)
);
const isLoading = ref(false);

const handleLoad = () => {
  if (dateRange.value.length != 2) return null;
  isLoading.value = true;
  let start = encodeURIComponent(
    dayjs(dateRange.value[0]).format("YYYY-MM-DD") + " 00:00:00"
  );
  let end = encodeURIComponent(
    dayjs(dateRange.value[1]).format("YYYY-MM-DD") + " 23:59:59"
  );
  axios
    .request({
      method: "get",
      url: "api/agent_atcos_load.php",
      params: { module: "hour", force: 1, verbose: 1, start, end },
    })
    .then((response) => {
      responseData.value = response.data.hour.content;
      ElNotification({
        type: "success",
        message: "查询到" + response.data.hour.content.length + "条记录",
      });
      isLoading.value = false;
    })
    .catch((error) => {
      response.value = error;
      ElNotification({
        type: "error",
        message: "查询出错了",
      });
      isLoading.value = false;
    });
};
</script>
